<template>
  <a-descriptions title="TRANSACTION" bordered :column="1">
    <a-descriptions-item label="交易HASH">
      {{ transaction.hash }}
      <a-icon type="copy" @click="copy(transaction.hash)"/>
    </a-descriptions-item>
    <a-descriptions-item label="区块高度">
      <router-link
        :to="{ name: 'Block', query: { number: transaction.blockNumber } }">
        {{ transaction.blockNumber }}
      </router-link>
    </a-descriptions-item>
    <a-descriptions-item label="区块HASH">
      <router-link
        :to="{ name: 'Block', query: { hash: transaction.blockHash } }">
        {{ transaction.blockHash }}
      </router-link>
      <a-icon type="copy" @click="copy(transaction.blockHash)"/>
    </a-descriptions-item>
    <a-descriptions-item label="上链时间">{{
      transaction.timestamp
    }}</a-descriptions-item>
    <a-descriptions-item label="发送方">
      <router-link
        :to="{ name: 'Balance', query: { address: transaction.from } }">
        {{ transaction.from }}
      </router-link>
      <a-icon type="copy" @click="copy(transaction.from)"/>
    </a-descriptions-item>
    <a-descriptions-item label="接收方">
      <router-link
        :to="{ name: 'Balance', query: { address: transaction.to } }">
        {{ transaction.to }}
      </router-link>
      <a-icon type="copy" @click="copy(transaction.to)" v-if="transaction.to"/>
    </a-descriptions-item>
    <a-descriptions-item label="交易量">
      {{ transaction.value }} wei
    </a-descriptions-item>
  </a-descriptions>
</template>

<script>
import Constant from "../utils/Constant";
export default {
  props: ["transaction"],
  created() {
    console.log(this.transaction);
  },
  methods: {
    copy(data) {
      console.log("copy", data)
      Constant.copyToClipboard(data, () => {
         this.$message.success(data + " Copied!")
      });
    },
  }
};
</script>
